<template>

  <div>

    <el-row :gutter="20">

      <!-- 左侧 -->
      <el-col :span="24">
        <el-row>
          <el-col :span="3" :offset="20" style="height: 60px; line-height: 60px;">
            <el-button size="small" @click="showAddInstitution = true">添加单位</el-button>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-table
              v-loading="listLoading"
              :data="pageInfo.records"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
              @row-click="rowClick"
            >

              <el-table-column align="center" label="单位名称">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>

              <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                  {{ scope.row.type | typeFilter }}
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center" width="255">
                <template slot-scope="scope">
                  <el-button size="mini" @click="selectedInstitution.id = scope.row.id; showUpdateInstitution = true">修改</el-button>
                  <el-button size="mini" type="danger" @click="deleteInstitution(scope.$index, scope.row)">删除</el-button>
                  <el-button v-if="scope.row.type == 2" size="mini" type="primary" plain @click="selectedInstitution.id = scope.row.id; showVillage = true">村庄管理</el-button>
                </template>
              </el-table-column>

            </el-table>
          </el-col>
        </el-row>

        <!-- 分页 -->
        <el-row style="margin-top: 15px;">
          <el-col style="text-align: center;">
            <el-pagination
              background
              :current-page="pageInfo.current"
              :page-size="pageInfo.size"
              layout="total, prev, pager, next, jumper"
              :total="pageInfo.total"
              @current-change="getInstitutionListPage"
            />
          </el-col>
        </el-row>
      </el-col>

    </el-row>

    <el-dialog title="添加单位" :visible.sync="showAddInstitution">
      <addInstitution v-if="showAddInstitution" @refresh="getInstitutionListPage(1)" @closeDialog="showAddInstitution = false" />
    </el-dialog>

    <el-dialog title="修改单位" :visible.sync="showUpdateInstitution">
      <updateInstitution v-if="showUpdateInstitution" :selected-id.sync="selectedInstitution.id" @refresh="getInstitutionListPage(1)" @closeDialog="showUpdateInstitution = false" />
    </el-dialog>

    <el-dialog title="村庄管理" :visible.sync="showVillage">
      <village v-if="showVillage" :selected-institution.sync="selectedInstitution" @closeDialog="showVillage = false" />
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request'
import addInstitution from './components/addInstitution.vue';
import updateInstitution from './components/updateInstitution.vue';
import village from './components/village.vue';
import qs from 'qs';

export default {
  filters: {
    typeFilter(type) {
      if (type === 1) {
        return '职能部门';
      }
      if (type === 2) {
        return '管理区';
      }
    }
  },
  components: { addInstitution, updateInstitution, village },
  data() {
    return {      
      showAddInstitution: false,
      showUpdateInstitution: false,
      showVillage: false,
      selectedInstitution: {},
      pageInfo: {},
      villagePageInfo: {},
      listLoading: true,
      searchData: {
        currentPage: 1
      }
    }
  },
  created() {
    this.getInstitutionListPage(this.searchData.currentPage)
  },
  methods: {
    rowClick(row, column, event) {
      this.selectedInstitution = row;
    },
    getInstitutionListPage(currentPage) {
      this.searchData.currentPage = currentPage;
      request({
        url: '/api/institution/getInstitutionListPage',
        method: 'get',
        params: this.searchData
      }).then((res) => {
        this.listLoading = true
        this.pageInfo = res.result;
        this.listLoading = false
      }).catch(() => {

      })
    },
    deleteInstitution(index, row) {
      this.$confirm('确认删除？')
        .then(_ => {
          request({
            url: '/api/institution/deleteInstitution',
            method: 'post',
            data: qs.stringify({ id: row.id }),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
          }).then((res) => {
            this.$message(res.resultCodeDesc);
            this.getInstitutionListPage(this.searchData.currentPage);
          }).catch(_ => {})
        })
        .catch(_ => {});
    }
  }
}
</script>
<style scoped>
  html,body {
    height:100%;
  }
</style>
